import { Button, Table, Modal, LocaleProvider, Form, Radio } from 'antd';
import { addon } from "pao-aop";
import { reactControl, ReactView, ReactViewControl, ReactViewState } from "pao-aop-client";
import React from "react";
import { MainCard } from "src/business/components/style-components/main-card";
import { MainContent } from "src/business/components/style-components/main-content";
import { AppServiceUtility } from 'src/projects/app/appService';
import { request } from "src/business/util_tool";
import { exprot_excel } from "src/business/util_tool";
import zh_CN from 'antd/lib/locale-provider/zh_CN';
/**
 * 组件：公众号关注统计
 */
export interface officialAccountStatisticsState extends ReactViewState {
    administrative_division_list: any[];
    area_id: string;
    table_total_size: number;
    base_situation: any[];
    page: number;
    page_size: number;
    /** 控制弹框显示 */
    show?: any;
}

/**
 * 组件：公众号关注统计
 * 描述
 */
export class officialAccountStatistics extends ReactView<officialAccountStatisticsControl, officialAccountStatisticsState> {
    columns: any = [
        {
            title: '幸福院',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '关注数',
            dataIndex: 'follow_quantity',
            key: 'follow_quantity',
        },
    ];
    constructor(props: any) {
        super(props);
        this.state = {
            administrative_division_list: [],
            area_id: '',
            table_total_size: 0,
            base_situation: [],
            page: 1,
            page_size: 10,
            show: false,
        };
    }
    componentWillMount = () => {
        this.getofficialAccountStatisticsData(1, 10);
    }

    // onChangeTree = (value: any) => {
    //     this.setState({
    //         area_id: value
    //     });
    // }

    // onSearch = () => {
    //     this.getofficialAccountStatisticsData(this.state.page, this.state.page_size);
    // }

    getofficialAccountStatisticsData = (page: number, pageSize: number) => {
        AppServiceUtility.official_follow_service!.get_Statistics_list!({}, page, pageSize)!
            .then(data => {
                this.setState({
                    base_situation: data!.result!,
                    table_total_size: data!.total!
                });
            }).catch(e => {
                console.error(e);
            });

    }
    // 导出类型选择
    onChangeRadio(value: any) {

    }
    onPageChange = (page: number, pageSize: number) => {
        this.getofficialAccountStatisticsData(page, pageSize);
    }

    // 下载
    download() {
        // let export_data: any = [];
        // 全部
        request(this, AppServiceUtility.official_follow_service.get_Statistics_list!({}))!
            .then((data: any) => {
                if (data['result']) {
                    let new_data: any = [];
                    data['result'].map((item: any) => {
                        new_data.push({
                            "幸福院": item.name && item.name.length > 0 ? item.name[0] : '',
                            "关注数": item.follow_quantity,
                        });
                    });
                    exprot_excel([{ name: '幸福院公众号关注统计', value: new_data }], '幸福院公众号关注统计', 'xls');
                }
            });
        this.setState({ 'show': false });
    }
    // 显示/取消弹窗
    onCancel(data: any) {
        this.setState(data);
    }
    /** 导出按钮 */
    export = () => {
        this.setState({ show: true });
    }
    render() {
        const { getFieldDecorator } = this.props.form!;
        return (
            <MainContent>
                <LocaleProvider locale={zh_CN}>
                    <MainCard title='基本情况统计' style={{ position: 'relative' }}>
                        <div style={{ overflow: 'hidden', position: 'absolute', top: '13px', right: '25px' }}>
                            <Button type="primary" onClick={this.export} style={{ float: 'right', marginRight: '3px' }}>导出</Button>
                            {/* <Button type="primary" onClick={this.onSearch} style={{ float: 'right', marginRight: '3px' }}>查询</Button> */}
                        </div>
                        <Table
                            columns={this.columns}
                            dataSource={this.state.base_situation}
                            pagination={{ pageSize: 10, total: this.state.table_total_size, onChange: this.onPageChange }}

                            bordered={true}
                            size="middle"
                        // scroll={{ x: 'calc(600px+50%)' }}
                        />
                    </MainCard>
                    <Modal
                        title="请选择导出类型"
                        visible={this.state.show}
                        onOk={() => this.download()}
                        onCancel={() => this.onCancel({ show: !this.state.show })}
                        okText="下载"
                        cancelText="取消"
                    >
                        <MainCard>
                            <Form>
                                <Form.Item>
                                    {getFieldDecorator('isAll', {
                                        initialValue: ''
                                    })(
                                        <Radio.Group onChange={(e: any) => { this.onChangeRadio(e.target.value); }}>
                                            <Radio key={1} value={1}>导出数据</Radio>
                                        </Radio.Group>
                                    )}
                                </Form.Item>
                            </Form>
                        </MainCard >
                    </Modal>
                </LocaleProvider>
            </MainContent>
        );
    }
}

/**
 * 控件：公众号关注统计
 * 描述
 */
@addon('officialAccountStatistics', '公众号关注统计', '')
@reactControl(Form.create<any>()(officialAccountStatistics), true)
export class officialAccountStatisticsControl extends ReactViewControl {
    /** 请求接口名 */
    public request_url?: string;
    /** 获取权限接口类 */
    public permission_class?: any;
    /** 获取权限接口方法名 */
    public get_permission_name?: string;
    /** 查询权限 */
    public select_permission?: string;
    /** 编辑权限 */
    public edit_permission?: string;
    /** 删除权限 */
    public delete_permission?: string;
    /** 新增权限 */
    public add_permission?: string;
    /** 判断类型 */
    public select_type?: any;
}